<template>
  <el-popover
    popper-style="width: auto"
    placement="bottom-start"
    :show-arrow="false"
  >
    <div class="title">全局配置</div>
    <el-menu
      :default-active="'/pm/globalSetting/pmFieldTemplate'"
      class="pm-info-menu-wapper"
      router
    >
      <el-menu-item index="/pm/globalSetting/pmFieldTemplate">
        <img src="@/assets/pm/baseInfo.svg" alt="" class="icon" />
        <span>项目字段模版</span>
      </el-menu-item>
      <el-menu-item index="/pm/globalSetting/taskFieldTemplate">
        <img src="@/assets/pm/baseInfo.svg" alt="" class="icon" />
        <span>任务字段模版</span>
      </el-menu-item>
      <el-menu-item index="/pm/globalSetting/pmRole">
        <img src="@/assets/pm/baseInfo.svg" alt="" class="icon" />
        <span>项目角色</span>
      </el-menu-item>
      <el-menu-item index="/pm/globalSetting/pmType">
        <img src="@/assets/pm/baseInfo.svg" alt="" class="icon" />
        <span>项目类型</span>
      </el-menu-item>
      <el-menu-item index="/pm/globalSetting/taskType">
        <img src="@/assets/pm/baseInfo.svg" alt="" class="icon" />
        <span>任务类型</span>
      </el-menu-item>
      <el-menu-item index="/pm/globalSetting/pmTemplate">
        <img src="@/assets/pm/baseInfo.svg" alt="" class="icon" />
        <span>项目模版</span>
      </el-menu-item>
      <el-menu-item index="/pm/globalSetting/lifecycleManagement">
        <img src="@/assets/pm/baseInfo.svg" alt="" class="icon" />
        <span>生命周期管理</span>
      </el-menu-item>
      <el-menu-item index="/pm/globalSetting/automateRules">
        <img src="@/assets/pm/baseInfo.svg" alt="" class="icon" />
        <span>自动化规则</span>
      </el-menu-item>
      <el-menu-item index="/pm/globalSetting/projectRecyclingBin">
        <img src="@/assets/pm/baseInfo.svg" alt="" class="icon" />
        <span>项目回收站</span>
      </el-menu-item>
    </el-menu>
    <template #reference>
      <img
        src="@/assets/pm/pmBreadcrumb.svg"
        class="breadcrumbIcon"
        @click="toggleBreadcrumbStatus"
      />
    </template>
  </el-popover>
</template>

<script setup lang="ts">
  import { usePMGlobalSettingStore } from "@/stores/pmGlobalSetting.ts";
  const pmGlobalSettingStore = usePMGlobalSettingStore();
  import { useRoute } from "vue-router";
  const route = useRoute();

  const toggleBreadcrumbStatus = () => {
    pmGlobalSettingStore.toggleBreadcrumbStatus();
  };
</script>

<style scoped lang="scss">
  .breadcrumbIcon {
    margin-right: 8px;
  }
  .title {
    font-size: 16px;
    color: #141414;
    padding-left: 18px;
    font-weight: 600;
    line-height: 32px;
  }
  .pm-info-menu-wapper {
    margin-top: 4px;
    border: none;
    transition: all 0.3s ease-in-out;
    opacity: 1;
    visibility: visible;
    :deep(.el-menu-item) {
      display: flex;
      gap: 6px;
      width: 175px;
      line-height: 40px;
      height: 40px;
      padding: 0;
      transition: all 0.3s ease-in-out;
    }
    :deep(.el-menu-item .icon) {
      /* 默认颜色 #5E5E5E */
      filter: invert(42%) sepia(0%) saturate(2%) hue-rotate(349deg)
        brightness(96%) contrast(89%);
    }
    :deep(.el-menu-item.is-active .icon) {
      /* 激活颜色 #1AA1FB */
      filter: invert(23%) sepia(97%) saturate(2871%) hue-rotate(212deg)
        brightness(98%) contrast(105%);
    }
    :deep(.el-menu-item:hover) {
      background: rgba(20, 86, 240, 0.05);
      border-radius: 4px;
    }
    :deep(.el-menu-item.is-active) {
      color: #1aa1fb;
      background: #e6ecff;
      border-radius: 4px;
    }
    :deep(.el-menu-item.is-active span) {
      font-weight: 500;
    }
  }
</style>
